{% extends "base.html" %}
{% load i18n %}
{% block head %}
	<title>{% trans "备份记录" %}</title>
	{{ block.super }}
{% endblock %}

{% block content %}
<div id="app" style="margin-top: 60px;">
    <el-row>
        <el-col :span="20" :offset="2">
            <el-table :data="backLogTable" border style="width: 100%">
                <el-table-column type="index" label="序号" width="60"></el-table-column>
                <el-table-column prop="ip" label="IP"></el-table-column>
                <el-table-column prop="file_list" label="文件列表" width="360"></el-table-column>
                <el-table-column prop="number" label="文件数量"></el-table-column>
                <el-table-column prop="size" label="文件大小" ></el-table-column>
                <el-table-column prop="create_time" label="备份时间" width="160"></el-table-column>
                <el-table-column prop="creater" label="备份人"></el-table-column>
                <el-table-column prop="job_link" label="JOB链接" width="160">
                    <template slot-scope="scope">
                        <el-link type="primary" :underline="false" :href="scope.row.job_link">
                            <el-button type="success" icon="el-icon-search" @click="getJobDetail(scope.row)">查看详情</el-button>
                        </el-link>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
    </el-row>
</div>
{% endblock %}

{% block extra_block %}
<script type="text/javascript">
    window.onload = function () {
        new Vue({
            el: '#app',
            data: {
                backLogTable: [],
            },
            mounted() {
                // 页面加载就获取所有模板
                this.getBackupTable()
            },
            methods: {
                getBackupTable() {
                    axios.get(site_url + 'get_backup_log_table/').then(res => {
                        if (res.data.result) {
                            this.backLogTable = res.data.data
                        }
                    })
                },
                getJobDetail() {
                }
            }
        })
    }
</script>
    <style>
    input[type="file"] {
        display: none;
    }
    #download {
        margin-left: 50px;
    }
</style>
{% endblock %}
